<script setup>
//import {excelApi} from "../../../api/axios";
//import {MINIO_HOST} from "../../../const";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {dateFormat, myRemove, myPage, myRemoveBatch, getResponseData} from "../../../util";
import {pageApi, removeApi, removeBatchApi} from "../../../api/stages.js";
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import MyList from "../../../components/MyList.vue";
import {listApi as listDirectionApi} from "../../../api/direction.js";

/* ==================== 分页查询 ==================== */
// 表格数据 + 分页数据
let records = ref();
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 5, 'fn': page});
// 分页查询条件字段：课程阶段名称和培训方向ID
let stagesName = shallowRef();
let directionId = shallowRef();

// 分页函数
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {

  // 分页基础配置
  let config = {
    'api': pageApi,
    'params': {pageNum, pageSize},
    'records': records,
    'pageInfo': pageInfo
  }

  // 附加为分页条件
  if (stagesName.value) config['params']['name'] = stagesName.value;
  if (directionId.value) config['params']['directionId'] = directionId.value;

  // 发送分页请求
  await myPage(config);
}

/* ==================== 查看详情 ==================== */
// 课程阶段详情抽屉 + 课程阶段详情列表数据
let detailDrawer = shallowRef();
let detailItems = ref();

/* ==================== 查询全部的方向记录 ==================== */
let directionItems = [];

async function listDirection() {
  let res = await listDirectionApi();
  let directions = getResponseData(res);
  Object.values(directions).forEach(dire => {
    directionItems.push({'label': dire['name'], 'value': dire['id']});
  });
}

function detail(row) {
  detailItems.value = [
    {'label': '阶段序号', 'value': row['sort'], 'type': 'tag'},
    {'label': '课程方向', 'value': row['direction']['name']},
    {'label': '阶段名称', 'value': row['name']},
    {'label': '阶段学时', 'value': row['hours']},
    /*{'label': '阶段状态', 'value': row['status'], 'type': 'tag'},*/
    {'label': '创建时间', 'value': row['created'], 'format': dateFormat},
    {'label': '修改时间', 'value': row['updated'], 'format': dateFormat},
    {'label': '涵盖技术', 'value': row['technicalPoints'], 'type': 'card'},
    {'label': '阶段描述', 'value': row['info'], 'type': 'card'},
  ];
  detailDrawer.value = true;
}

/* ==================== 单条添加 ==================== */
function insert() {
  router.push('/CourseStagesInsert');
}

/* ==================== 单条修改 ==================== */
function update(row) {
  sessionStorage.setItem('stages', JSON.stringify(row));
  router.push('/CourseStagesUpdate');
}

/* ==================== 单条删除 ==================== */
function remove(row) {
  myRemove({'id': row['id'], 'api': removeApi, 'fn': page});
}

/* ==================== 批量删除 ==================== */
// 批量删除主键数组
let ids = [];

function selectionChange(rows) {
  ids = rows.map(e => e['id']);
}

function removeBatch() {
  myRemoveBatch({'ids': ids, 'api': removeBatchApi, 'fn': page})
}

/* ==================== 按课程阶段名称模糊查询 ==================== */
function pageLikeName(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || stagesName.value) {
    stagesName.value = val;
    page();
  }
}

/* ==================== 按所在班级查询 ==================== */
function pageByDirectionId(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || directionId.value) {
    directionId.value = val;
    page();
  }
}

/* ==================== 打印报表 ==================== */
function excel() {
  // excelApi('/stages/excel', '课程阶段统计表');
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  page()
  listDirection()
});


</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '课程管理'},
    {'icon': 'User', 'label': '课程阶段列表'},
  ]"/>

  <my-head :items="[
    {'type': 'ipt', 'span': 5, 'placeholder': '按课程阶段名称模糊搜索', 'fn': pageLikeName},
      {'type': 'opt', 'span': 5, 'placeholder': '按方向搜索', 'fn': pageByDirectionId, 'optItems': directionItems},
    {'type': 'insertBtn', 'offset': 11, 'fn': insert},
    {'type': 'deleteBtn', 'fn': removeBatch},
    {'type': 'excelBtn', 'fn': excel},
  ]"/>

  <my-table v-if="records" :records="records" :columns="[
    {'column': ['课程阶段信息', '阶段序号'], 'property': 'sort', 'type': 'tag', 'width': '90'},
    {'column': ['课程阶段信息', '课程方向'], 'property': 'direction.name', 'width': '90'},
    {'column': ['课程阶段信息', '阶段名称'], 'property': 'name'},
    {'column': ['课程阶段信息', '阶段学时'], 'property': 'hours', 'width': '90'},
    {'column': ['课程阶段信息', '涵盖技术'], 'property': 'technicalPoints', 'type': 'card', 'tooltip': false},
    {'column': ['课程阶段信息', '阶段描述'], 'property': 'info', 'type': 'card', 'tooltip': false},
    /*{'column': ['课程阶段信息', '阶段状态'], 'property': 'status'},*/
  ]" :buttons="[
    {'type': 'info', 'fn': detail},
    {'type': 'update', 'fn': update},
    {'type': 'delete', 'fn': remove}
  ]" :selection-change="selectionChange"/>

  <my-pager v-if="records" :page-info="pageInfo"/>

  <el-drawer v-model="detailDrawer" size="30%">
    <my-list title="记录详情" :items="detailItems"/>
  </el-drawer>

</template>

<style scoped lang="scss">

</style>